<template>
  <div>
    <h4>{{photod.title}}</h4>
    <p>
      <span class="time">发表时间：{{photod.add_time | dateFormat}}</span>
      <span class="click">点击量：{{photod.click}}</span>
    </p>
    <hr />
    <!-- 图片缩略图 区域 -->
    <ul>
      <li v-for="(item,i) in photoArray" :key="i" @click='preview(i)'>
        <img :src="item.src" alt  />
      </li>
    </ul>
    <br />
    <!-- 简介区域 -->
    <div class="content">{{photod.content}}</div>
    <!-- 发表评论区域 -->

    <!-- 留言区 -->
  <my-comment :id='id'></my-comment>
  </div>
</template>

<script>
// 引入公共区域的评论模块
import Comments from '../../../component/Comments.vue'
export default {
  data () {
    return {
      // 图片详情内容
      photod: {
        id: '',
        title: '',
        add_time: '',
        content: '',
        click: ''
      },
      // 图片缩略图
      photoArray: [],
      id: 0
    }
  },
  created () {
    this.id = this.$route.params.id
    this.showPhotoDetails()
    this.gettpArray()
  },
  components: {
    'my-comment': Comments
  },
  methods: {
    //   获取图片详细内容
    async showPhotoDetails () {
      const { data: res } = await this.$http.get(
        '/api/getimageInfo/' + this.$route.params.id
      )
      if (res.status !== 0) {
        return this.$toast('请求出现错误')
      }
      this.photod = res.message[0]
      console.log(this.photod)
    },
    // 获取图片缩略图
    async gettpArray () {
      const { data: res } = await this.$http.get(
        '/api/getthumimages/' + this.$route.params.id
      )
      if (res.status !== 0) return this.$toast('请求出现错误')
      this.photoArray = res.message
      console.log(this.photoArray)
    },
    // 点击每个li预览图片
    preview (i) {
    // 获取图片地址  数组形式
      const srcArr = []
      this.photoArray.forEach(item => srcArr.push(item.src))
      // console.log(srcArr)
      this.$imagePreview({
        images: srcArr,
        startPosition: i,
        onClose () {
          // do something
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
h4 {
  color: #26a2ff;
  text-align: center;
  margin: 20px;
  font-size: 15px;
}
p {
  padding: 5px;
  margin: 10px;
  overflow: hidden;
}
.time {
  float: left;
  font-size: 13px;
  color: #8f8f94;
}
.click {
  float: right;
  font-size: 13px;
  color: #8f8f94;
}
ul {
  list-style: none;
  margin: 10px;
  overflow: hidden;
}
ul li {
  float: left;
  width: 33.33333%;
  padding: 5px;
  box-sizing: border-box;
}
ul li img {
  width: 100%;
  box-shadow: 2px 0 5px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  border-radius: 10px;
}
.content {
  // width: 100%;
  padding:0 14px;
  text-indent: 2em;
}
</style>
